// pages/test/test.js\
import * as echarts from '../../ec-canvas/echarts';
import geoJson from 'shandong.js'

const app = getApp();

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart(chart);
  echarts.registerMap('shandong', geoJson);
  
  const option ={
      title:{
          text: '山东省地图',
          top:'3%',
          left:'center',
          textStyle:{
            fontSize:20,
            fontWeight:600,
            color:'#222'
          }
      },
      tooltip:{
        trigger:'item',
        formatter: function (val) {
          return val.data.name + '人口数量: ' + val.data.value + '万'
        }
      },
      series:[{
        type: 'map',
        map:'shandong',
        roam:true,//开启地图缩放
        geoIndex:0,
        label:{
          normal:{
              show:true,//显示省市标签
              textStyle:{color:"#222"}
          },
          emphasis:{
              show:true,//显示省市标签
              textStyle:{color:"#222"}
          }
        },
        itemStyle: {
            normal: {
                borderWidth: .5,//区域边框宽度
                borderColor: '#0550c3',//区域边框颜色
                areaColor:"#57cfff",//区域颜色
            },
            emphasis: {
               // borderWidth: .95,//鼠标滑过区域，区域边框宽度
               //borderColor: '#fff',//鼠标滑过区域，区域边框颜色
               // areaColor:"#ff6511",//鼠标滑过区域背景色
                areaColor: "#ff6511",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        data: [
          { name: '济南市', value: 1000 },
          { name: '青岛市', value: 10 },
          { name: '德州市', value: 20 },
          { name: '淄博市', value: 30 },
          { name: '潍坊市', value: 40 },
          { name: '日照市', value: 41 },
          { name: '济宁市', value: 15 },
          { name: '菏泽市', value: 25 },
          { name: '烟台市', value: 35 },
          { name: '威海市', value: 35 },
          { name: '泰安市', value: 35 },
          { name: '临沂市', value: 35 },
          { name: '枣庄市', value: 35 },
          { name: '滨州市', value: 35 },
          { name: '东营市', value: 35 },
          { name: '莱芜市', value: 35 },
          { name: '聊城市', value: 35 }
        ]
      }],
  }
  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ecMap: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});
